<template>
  <div class="my-schedule-container">
    <el-card shadow="never">
      <template #header>
        <div class="header-actions">
          <h2>我的排班表</h2>
          <div class="view-controls">
            <!-- 日期导航 -->
            <div class="date-navigation">
              <el-button-group>
                <!-- 日视图专属的上一天、下一天切换 -->
                <el-button
                  @click="prevDay"
                  v-if="currentView === 'day'"
                >
                  <el-icon><ArrowLeft /></el-icon>
                  上一天
                </el-button>
                <el-button @click="today">今天</el-button>
                <el-button
                  @click="nextDay"
                  v-if="currentView === 'day'"
                >
                  下一天
                  <el-icon><ArrowRight /></el-icon>
                </el-button>

                <!-- 周、月视图的周期切换 -->
                <el-button
                  @click="prevPeriod"
                  v-if="currentView!== 'day'"
                  :disabled="currentView === 'day'"
                >
                  <el-icon><ArrowLeft /></el-icon>
                  {{ currentView === 'week'? '上周' : '上月' }}
                </el-button>
                <el-button
                  @click="nextPeriod"
                  v-if="currentView!== 'day'"
                  :disabled="currentView === 'day'"
                >
                  {{ currentView === 'week'? '下周' : '下月' }}
                  <el-icon><ArrowRight /></el-icon>
                </el-button>
              </el-button-group>
              <span class="current-period">{{ periodTitle }}</span>
            </div>

            <!-- 视图切换 -->
            <el-button-group class="view-switcher">
              <el-button
                :type="currentView === 'day'? 'primary' : ''"
                @click="switchView('day')"
              >日</el-button>
              <el-button
                :type="currentView === 'week'? 'primary' : ''"
                @click="switchView('week')"
              >周</el-button>
              <el-button
                :type="currentView ==='month'? 'primary' : ''"
                @click="switchView('month')"
              >月</el-button>
            </el-button-group>
          </div>
        </div>
      </template>

      <div class="schedule-content">
        <!-- 员工基本信息 -->
        <!-- <div class="staff-info" v-if="myStaff">
          <el-descriptions column="3" border :column="3" class="staff-descriptions">
            <el-descriptions-item label="姓名">{{ myStaff.staffName || '未知' }}</el-descriptions-item>
            <el-descriptions-item label="职称">{{ myStaff.titleName || '无' }}</el-descriptions-item>
            <el-descriptions-item label="职位">{{ myStaff.positionName || '无' }}</el-descriptions-item>
          </el-descriptions>
        </div> -->

        <!-- 月视图 -->
        <div v-if="currentView ==='month'" class="month-view">
          <div class="calendar-header">
            <div class="weekday-item" v-for="(day, index) in weekdays" :key="index">{{ day }}</div>
          </div>
          <div class="calendar-grid">
            <!-- 上月占位格子 -->
            <div class="date-item empty" v-for="(empty, index) in prevMonthEmptyDays" :key="`prev-${index}`"></div>

            <!-- 当月日期格子 -->
            <div
              class="date-item"
              v-for="(day, index) in monthDays"
              :key="index"
              :class="{
                'today': isToday(day.date),
                'weekend': day.isWeekend,
                'has-shift': getDayShifts(day.date).length > 0,
              }"
            >
              <div class="date-number">{{ day.date.split('-').slice(2).join('-') }}</div>
              <div class="shift-list">
                <div
                  v-for="(shift, sIndex) in getDayShifts(day.date)"
                  :key="sIndex"
                  class="shift-item"
                  :class="getScheduleClassName(shift)"
                  v-tooltip="{
                    content: `${shift.shiftName}\n${formatTime(shift.startTime)} - ${formatTime(shift.endTime)}`,
                    placement: 'top'
                  }"
                >
                  {{ shift.shiftName }}（{{ formatTime(shift.startTime) }} - {{ formatTime(shift.endTime) }}）
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 周视图 -->
        <div v-if="currentView === 'week'" class="week-view">
          <div class="week-days">
            <div
              class="week-day-item"
              v-for="(day, index) in weekDays"
              :key="index"
              :class="{
                'today': isToday(day.date),
                'weekend': day.isWeekend,
              }"
            >
              <div class="day-header">
                <div class="day-name">{{ day.label.split('\n')[0] }}</div>
                <div class="day-week">{{ day.label.split('\n')[1] }}</div>
              </div>
              <div class="day-shifts">
                <div
                  v-for="(shift, sIndex) in getDayShifts(day.date)"
                  :key="sIndex"
                  class="shift-item"
                  :class="getScheduleClassName(shift)"
                >
                  <div class="shift-time">{{ formatTime(shift.startTime) }} - {{ formatTime(shift.endTime) }}</div>
                  <div class="shift-name">{{ shift.shiftName }}</div>
                </div>
                <div class="no-shift" v-if="getDayShifts(day.date).length === 0">无排班</div>
              </div>
            </div>
          </div>
        </div>

        <!-- 日视图 -->
        <div v-if="currentView === 'day'" class="day-view">
          <div class="day-header">
            <h3>{{ currentDate.getFullYear() }}年{{ currentDate.getMonth() + 1 }}月{{ currentDate.getDate() }}日 {{ weekdays[currentDate.getDay()] }}</h3>
          </div>
          
          <!-- 时长统计信息 -->
          <div class="duration-stats">
            <el-descriptions column="2" border>
              <el-descriptions-item label="当天班次">
                {{ dayShifts.length > 0? dayShifts.map(s => `${s.shiftName}（${formatTime(s.startTime)} - ${formatTime(s.endTime)}）`).join('、') : '无' }}
              </el-descriptions-item>
              <el-descriptions-item label="当天需工作时长">
                {{ dayWorkingHours.toFixed(1) }}小时
              </el-descriptions-item>
              <el-descriptions-item label="当月（自然月）需工作时长">
                {{ monthTotalWorkingHours.toFixed(1) }}小时
              </el-descriptions-item>
              <el-descriptions-item label="当月（自然月）工作日总数">
                {{ daysInCurrentMonth }}天
              </el-descriptions-item>
              <el-descriptions-item label="当月（至今天）已工作时长">
                {{ monthWorkedHoursToToday.toFixed(1) }}小时
              </el-descriptions-item>
              <el-descriptions-item label="当月（至今天）已上班天数">
                {{ monthWorkedDaysToToday }}天
              </el-descriptions-item>
            </el-descriptions>
          </div>
          
          <!-- 当天班次详情 -->
          <div class="day-shifts-details">
            <h4>当天班次详情</h4>
            <div v-if="dayShifts.length > 0">
              <div 
                v-for="(shift, index) in dayShifts" 
                :key="index" 
                class="shift-detail-card"
                :class="getScheduleClassName(shift)"
              >
                <div class="shift-detail-header">
                  <span class="shift-detail-name">{{ shift.shiftName }}</span>
                  <span class="shift-detail-time">{{ formatTime(shift.startTime) }} - {{ formatTime(shift.endTime) }}</span>
                </div>
                <div class="shift-detail-body">
                  <p>工作时长: {{ (shift.scheShift?.workingHours || 0).toFixed(1) }}小时</p>
                </div>
              </div>
            </div>
            <div v-else class="no-shift">
              <el-empty description="今天没有排班"></el-empty>
            </div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, watch } from 'vue'
import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'
import { useStaffStore } from '@/stores/system/staff'
import { useScheduleStore } from '@/stores/schedule/schedule'
import { ElMessage, ElEmpty } from 'element-plus'
import type { ISchedule } from '@/api/schedule/schedule'

// 状态管理
const staffStore = useStaffStore()
const scheduleStore = useScheduleStore()

// 固定员工ID（根据实际调整）
const targetStaffId = 1001 

// 日期与视图管理
const currentDate = ref(new Date())
const currentView = ref<'day' | 'week' |'month'>('month')
const myStaff = ref<any>(null) 
const mySchedules = ref<Map<string, ISchedule[]>>(new Map()) 
// 所有已出现的班次类型（用于自动生成颜色）
const allShiftTypes = ref<Set<string>>(new Set())

// 基础数据
const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']

// 预设颜色池 - 用于未配置的新班次
const colorPool = [
  { class: 'color-cyan' },    // 柔和青色
  { class: 'color-coral' },   // 柔和珊瑚色
  { class: 'color-indigo' },  // 柔和靛蓝色
  { class: 'color-bluegray' },// 柔和蓝灰色
  { class: 'color-pink' },    // 柔和粉红色
  { class: 'color-lightgreen' },// 柔和浅绿色
  { class: 'color-violet' }   // 柔和堇色
]

// 计算月视图天数及上月占位天数
const monthDays = computed(() => {
  const days = []
  const year = currentDate.value.getFullYear()
  const month = currentDate.value.getMonth()
  const daysInMonth = new Date(year, month + 1, 0).getDate()
  const firstDayOfMonth = new Date(year, month, 1).getDay() 

  for (let i = 1; i <= daysInMonth; i++) {
    const date = new Date(year, month, i)
    const dayOfWeek = date.getDay()
    const isWeekend = dayOfWeek === 0 || dayOfWeek === 6
    const dateStr = formatDateToYMD(date)

    days.push({
      date: dateStr,
      label: `${month + 1}月${i}日\n星期${weekdays[dayOfWeek].slice(1)}`,
      isWeekend
    })
  }
  return days
})

// 上月占位天数
const prevMonthEmptyDays = computed(() => {
  const year = currentDate.value.getFullYear()
  const month = currentDate.value.getMonth()
  const firstDayOfMonth = new Date(year, month, 1).getDay()
  return Array.from({ length: firstDayOfMonth }, (_, i) => i)
})

// 计算周视图天数
const weekDays = computed(() => {
  const days = []
  const current = new Date(currentDate.value)
  const dayOfWeek = current.getDay()
  const diff = dayOfWeek === 0? -6 : 1 - dayOfWeek 
  const start = new Date(current)
  start.setDate(current.getDate() + diff)

  for (let i = 0; i < 7; i++) {
    const date = new Date(start)
    date.setDate(start.getDate() + i)
    const dayOfWeek = date.getDay()
    const isWeekend = dayOfWeek === 0 || dayOfWeek === 6
    const dateStr = formatDateToYMD(date)

    days.push({
      date: dateStr,
      label: `${date.getMonth() + 1}月${date.getDate()}日\n${weekdays[dayOfWeek]}`,
      isWeekend
    })
  }
  return days
})

// 当前周期标题
const periodTitle = computed(() => {
  if (currentView.value ==='month') {
    return `${currentDate.value.getFullYear()}年 ${currentDate.value.getMonth() + 1}月`
  } else if (currentView.value === 'week') {
    const start = new Date(currentDate.value)
    const dayOfWeek = start.getDay()
    const diff = dayOfWeek === 0? -6 : 1 - dayOfWeek
    start.setDate(start.getDate() + diff)
    const end = new Date(start)
    end.setDate(start.getDate() + 6)
    return `${start.getMonth() + 1}月${start.getDate()}日 - ${end.getMonth() + 1}月${end.getDate()}日`
  } else {
    return `${currentDate.value.getFullYear()}年${currentDate.value.getMonth() + 1}月${currentDate.value.getDate()}日`
  }
})

// 当前日日期字符串
const currentDayDate = computed(() => formatDateToYMD(currentDate.value))

// 获取某天的班次
const getDayShifts = (date: string) => {
  return mySchedules.value.get(date) || []
}

// 判断是否是今天
const isToday = (dateStr: string) => {
  const today = formatDateToYMD(new Date())
  return dateStr === today
}

// 获取班次样式类名（基于时间段）
const getScheduleClassName = (shift: ISchedule) => {
  // 优先根据时间段判断
  const startTime = shift.startTime || shift.scheShift?.startTime || '';
  if (startTime) {
    const hour = parseInt(startTime.split(':')[0], 10);
    if (hour >= 6 && hour < 12) return 'shift-morning'; // 早班
    if (hour >= 12 && hour < 18) return 'shift-noon';   // 中班
    if (hour >= 18 && hour < 24) return 'shift-evening';// 晚班
    if (hour >= 0 && hour < 6) return 'shift-night';    // 夜班
  }

  // 其次根据班次名称判断
  const shiftName = shift.shiftName || '未知班次';
  if (shiftName.includes('早班')) return 'shift-morning';
  if (shiftName.includes('中班')) return 'shift-noon';
  if (shiftName.includes('晚班')) return 'shift-evening';
  if (shiftName.includes('夜班')) return 'shift-night';
  if (shiftName.includes('休息')) return 'shift-rest';

  // 为未识别班次自动分配颜色
  if (!allShiftTypes.value.has(shiftName)) {
    allShiftTypes.value.add(shiftName);
  }
  
  const nameHash = Array.from(shiftName).reduce((acc, char) => acc + char.charCodeAt(0), 0);
  const colorIndex = nameHash % colorPool.length;
  return colorPool[colorIndex].class;
}

// 周期切换方法
const prevPeriod = () => {
  const newDate = new Date(currentDate.value)
  currentView.value ==='month'
   ? newDate.setMonth(newDate.getMonth() - 1)
    : newDate.setDate(newDate.getDate() - 7)
  currentDate.value = newDate
}

const nextPeriod = () => {
  const newDate = new Date(currentDate.value)
  currentView.value ==='month'
   ? newDate.setMonth(newDate.getMonth() + 1)
    : newDate.setDate(newDate.getDate() + 7)
  currentDate.value = newDate
}

// 日视图切换上一天、下一天
const prevDay = () => {
  const newDate = new Date(currentDate.value)
  newDate.setDate(newDate.getDate() - 1)
  currentDate.value = newDate
}

const nextDay = () => {
  const newDate = new Date(currentDate.value)
  newDate.setDate(newDate.getDate() + 1)
  currentDate.value = newDate
}

const today = () => {
  currentDate.value = new Date()
}

// 日期格式化为YYYY-MM-DD
const formatDateToYMD = (date: Date) => {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
}

// 时间格式化（去掉秒）
const formatTime = (timeStr: string) => {
  if (!timeStr) return '';
  return timeStr.length >= 5? timeStr.substring(0, 5) : timeStr;
}

// 切换视图
const switchView = (view: 'day' | 'week' |'month') => {
  currentView.value = view
}

// 时长统计相关计算属性
const dayShifts = computed(() => getDayShifts(currentDayDate.value))

// 计算当天工作时长
const dayWorkingHours = computed(() => {
  return dayShifts.value.reduce((total, shift) => {
    if (!shift.shiftName.includes('休息')) { 
      return total + (shift.scheShift?.workingHours || 0)
    }
    return total
  }, 0)
})

// 计算当月（自然月）总天数
const daysInCurrentMonth = computed(() => {
  const year = currentDate.value.getFullYear()
  const month = currentDate.value.getMonth()
  return new Date(year, month + 1, 0).getDate()
})

// 计算当月（自然月）所有排班
const monthShifts = computed(() => {
  const shifts: ISchedule[] = []
  const year = currentDate.value.getFullYear()
  const month = currentDate.value.getMonth()

  mySchedules.value.forEach((dayShifts) => {
    dayShifts.forEach(shift => {
      const shiftDate = new Date(shift.dutyDay)
      if (shiftDate.getMonth() === month && shiftDate.getFullYear() === year) {
        shifts.push(shift)
      }
    })
  })
  return shifts
})

// 计算当月（自然月）工作总时长
const monthTotalWorkingHours = computed(() => {
  return monthShifts.value.reduce((total, shift) => {
    if (!shift.shiftName.includes('休息')) { 
      return total + (shift.scheShift?.workingHours || 0)
    }
    return total
  }, 0)
})

// 计算当月1日到当前日期的所有排班
const monthShiftsToToday = computed(() => {
  const shifts: ISchedule[] = []
  const year = currentDate.value.getFullYear()
  const month = currentDate.value.getMonth()
  const today = new Date()
  // 确定统计的结束日期（不超过今天）
  const endDate = new Date(Math.min(currentDate.value.getTime(), today.getTime()))
  
  mySchedules.value.forEach((dayShifts) => {
    dayShifts.forEach(shift => {
      const shiftDate = new Date(shift.dutyDay)
      // 检查是否是当月且不晚于结束日期的日期
      if (shiftDate.getMonth() === month && 
          shiftDate.getFullYear() === year &&
          shiftDate <= endDate) {
        shifts.push(shift)
      }
    })
  })
  return shifts
})

// 计算当月（至今天）已工作时长
const monthWorkedHoursToToday = computed(() => {
  return monthShiftsToToday.value.reduce((total, shift) => {
    if (!shift.shiftName.includes('休息')) { 
      return total + (shift.scheShift?.workingHours || 0)
    }
    return total
  }, 0)
})

// 计算当月（至今天）已上班天数
const monthWorkedDaysToToday = computed(() => {
  const workedDays = new Set<string>()
  monthShiftsToToday.value.forEach(shift => {
    if (!shift.shiftName.includes('休息')) { 
      workedDays.add(shift.dutyDay)
    }
  })
  return workedDays.size
})

// 初始化员工信息和排班数据
const initData = async () => {
  try {
    const year = currentDate.value.getFullYear()
    const month = currentDate.value.getMonth() + 1
    await scheduleStore.fetchSchedules({
      year,
      month,
      staffId: targetStaffId,
    })

    const staffSchedules = scheduleStore.scheduleList.map(schedule => ({
     ...schedule,
      shiftName: schedule.scheShift?.shiftName || '未知班次',
      startTime: schedule.scheShift?.startTime || '00:00:00',
      endTime: schedule.scheShift?.endTime || '00:00:00',
    }))

    // 收集所有班次类型
    staffSchedules.forEach(schedule => {
      allShiftTypes.value.add(schedule.shiftName)
    })

    const scheduleMap = new Map<string, ISchedule[]>()
    staffSchedules.forEach(schedule => {
      const key = schedule.dutyDay
      if (!scheduleMap.has(key)) {
        scheduleMap.set(key, [])
      }
      scheduleMap.get(key)!.push(schedule)
    })
    mySchedules.value = scheduleMap

    // 获取员工信息
    myStaff.value = staffStore.staffList.find(item => item.staffId === targetStaffId)

  } catch (error) {
    console.error('初始化数据失败:', error)
    ElMessage.error('加载排班数据失败')
  }
}

// 监听日期或视图变化重新加载数据
watch([() => currentDate.value.getMonth(), () => currentDate.value.getFullYear(), () => currentView.value], () => {
  initData()
}, { deep: true })

// 页面初始化
onMounted(() => {
  initData()
})
</script>

<style lang="scss" scoped>
.my-schedule-container {
  padding: 20px;
  background-color: #f5f7fa;

  .header-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 15px;

    h2 {
      margin: 0;
      color: #303133;
      font-size: 20px;
    }

    .view-controls {
      display: flex;
      align-items: center;
      gap: 15px;
      flex-wrap: wrap;

      .date-navigation {
        display: flex;
        align-items: center;
        gap: 10px;

        .current-period {
          font-weight: 500;
          color: #606266;
        }
      }

      .view-switcher {
        margin-left: auto;
      }
    }
  }

  .staff-info {
    margin-bottom: 20px;

    .staff-descriptions {
      background-color: #fff;
    }
  }

  .schedule-content {
    background-color: #fff;
    border-radius: 4px;
    padding: 15px;
    min-height: 400px;
  }

  // 时间段班次颜色样式
  .shift-item, .shift-detail-card {
    transition: all 0.2s;
    border-radius: 4px;
    color: white;
  }

  // 早班：浅青色
  .shift-morning {
    background-color: #e6f7f0;
    border-left: 3px solid #52c41a;
    color: #237804;
  }

  // 中班：浅绿色
  .shift-noon {
    background-color: #e8f5ff;
    border-left: 3px solid #1890ff;
    color: #096dd9;
  }

  // 晚班：浅紫色
  .shift-evening {
    background-color: #f6f3ff;
    border-left: 3px solid #722ed1;
    color: #531dab;
  }

  // 夜班：浅灰色
  .shift-night {
    background-color: #f5f5f5;
    border-left: 3px solid #8c8c8c;
    color: #434343;
  }

  // 休息：浅灰色
  .shift-rest {
    background-color: #f0f0f0;
    border-left: 3px solid #bdbdbd;
    color: #616161;
  }

  // 预设颜色池样式
  .color-cyan {
    background-color: #e0f7fa;
    border-left: 3px solid #4dd0e1;
    color: #00695c;
  }

  .color-coral {
    background-color: #fff3e0;
    border-left: 3px solid #ff8a65;
    color: #e65100;
  }

  .color-indigo {
    background-color: #ede7f6;
    border-left: 3px solid #9fa8da;
    color: #3949ab;
  }

  .color-bluegray {
    background-color: #eef2f7;
    border-left: 3px solid #b2ccd6;
    color: #263238;
  }

  .color-pink {
    background-color: #fce4ec;
    border-left: 3px solid #f06292;
    color: #880e4f;
  }

  .color-lightgreen {
    background-color: #f1f8e9;
    border-left: 3px solid #aed581;
    color: #33691e;
  }

  .color-violet {
    background-color: #f3e5f5;
    border-left: 3px solid #7986cb;
    color: #4a148c;
  }

  // 月视图样式
  .month-view {
    .calendar-header {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 8px;
      margin-bottom: 8px;

      .weekday-item {
        text-align: center;
        padding: 8px 0;
        font-weight: 500;
        color: #606266;
        background-color: #f5f5f5;
        border-radius: 4px;
      }
    }

    .calendar-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 8px;

      .date-item {
        min-height: 120px;
        padding: 8px;
        border: 1px solid #e4e7ed;
        border-radius: 4px;
        position: relative;

        &.empty {
          background-color: #fafafa;
          border-color: #f0f0f0;
        }

        &.today {
          border-color: #409eff;
          background-color: #ecf5ff;
        }

        &.weekend {
          background-color: #f9f9f9;
        }

        &.has-shift {
          border-left: 3px solid #4caf50;
        }

        .date-number {
          font-size: 14px;
          margin-bottom: 8px;
          color: #303133;
        }

        .shift-list {
          display: flex;
          flex-direction: column;
          gap: 4px;
          max-height: 90px;
          overflow: hidden;
        }

        .shift-item {
          padding: 3px 4px;
          font-size: 12px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }

  // 周视图样式
  .week-view {
    .week-days {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 15px;
    }

    .week-day-item {
      border: 1px solid #e4e7ed;
      border-radius: 4px;
      padding: 10px;

      &.today {
        border-color: #409eff;
        background-color: #ecf5ff;
      }

      &.weekend {
        background-color: #f9f9f9;
      }

      .day-header {
        margin-bottom: 10px;
        padding-bottom: 8px;
        border-bottom: 1px dashed #e4e7ed;

        .day-name {
          font-weight: 500;
          color: #303133;
        }

        .day-week {
          font-size: 12px;
          color: #909399;
        }
      }

      .day-shifts {
        min-height: 120px;
        display: flex;
        flex-direction: column;
        gap: 8px;

        .shift-item {
          padding: 6px;

          .shift-time {
            font-size: 12px;
          }

          .shift-name {
            font-weight: 500;
            margin-top: 2px;
          }
        }

        .no-shift {
          color: #909399;
          font-size: 14px;
          text-align: center;
          padding: 20px 0;
          flex-grow: 1;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }

  // 日视图样式
  .day-view {
    .day-header {
      text-align: center;
      margin-bottom: 20px;
      padding-bottom: 10px;
      border-bottom: 1px solid #e4e7ed;

      h3 {
        margin: 0;
        color: #303133;
        font-size: 18px;
      }
    }

    .duration-stats {
      margin-bottom: 20px;
    }

    .day-shifts-details {
      margin-top: 20px;
      
      h4 {
        margin-bottom: 15px;
        color: #303133;
        font-size: 16px;
      }
      
      .shift-detail-card {
        padding: 15px;
        margin-bottom: 15px;
        
        .shift-detail-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 10px;
          
          .shift-detail-name {
            font-size: 18px;
            font-weight: 500;
          }
          
          .shift-detail-time {
            font-size: 16px;
          }
        }
      }
      
      .no-shift {
        min-height: 200px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}

// 修复tooltip样式作用域问题
:deep(.el-tooltip__popper) {
  max-width: 200px;
}
</style>